<template>
<div>
  <table class="el-table ui-table" :class="{'table-fixed-header': isFixed}"
    cellspacing="0"
    cellpadding="0"
    border="0">
    <thead class="ui-table__thead">
      <tr>
        <th class="ui-table_column_0">
          <div class="cell t-left">
            <p class="ml-10">
              <el-checkbox v-model="checkAll" @change="changeCheckAll"></el-checkbox>
              <span style="margin-left:5px">全选</span>
            </p>
          </div>
        </th>
        <th class="ui-table_column_1">
          <div class="cell">
            <p>发布岗位数/岗位
              <i class="el-icon-search" style="font-size: 24px; color: #c5c5c5"></i>
            </p>
          </div>
        </th>
        <th class="ui-table_column_2">
          <div class="cell">媒体渠道投递</div>
        </th>
        <th class="ui-table_column_3">
          <div class="cell">待处理简历</div>
        </th>
        <th class="ui-table_column_4">
          <div class="cell">面试中人数</div>
        </th>
        <th class="ui-table_column_5">
          <div class="cell">offer中人数</div>
        </th>
        <th class="ui-table_column_6">
          <div class="cell">入职/调动中人数</div>
        </th>
        <th class="ui-table_column_7">
          <div class="cell">岗位发布时间</div>
        </th>
        <th class="ui-table_column_8">
          <div class="cell">招聘经理</div>
        </th>
      </tr>
    </thead>
  </table>
  <div v-if="isFixed" style="height:50px;"></div>
  <table class="el-table ui-table"
    cellspacing="0"
    cellpadding="0"
    border="0">
    <tbody>
      <tr v-for="(column,index) in data">
        <!-- 操作 -->
        <td class="ui-table_column_0" width="80">
          <div class="cell t-left">
            <p class="ml-10" v-if="index>0">
              <el-checkbox v-model="column.isChecked" @change="changeCheckItem"></el-checkbox>
            </p>
          </div>
        </td>

        <!-- 发布岗位数/岗位 -->
        <td class="ui-table_column_1" width="30%">
          <div class="cell">
            <el-dropdown trigger="click" v-if="column.isParent">
              <span style="color:#919191">
                <i class="el-icon-caret-bottom el-icon--left"></i>
                {{column.releaseCount}} 
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>{{column.releaseCount}}</el-dropdown-item>
                <el-dropdown-item>其他1</el-dropdown-item>
                <el-dropdown-item>其他2</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span v-else>{{column.releaseCount}}</span>
          </div>
        </td>

        <!-- 媒体渠道投递 -->
        <td class="ui-table_column_2">
          <div class="cell">
            <span style="color: #4c9de7">{{column.mediaCount}}</span>
          </div>
        </td>

        <!-- 待处理简历 -->
        <td class="ui-table_column_3">
          <div class="cell">
            <span style="color: #4c9de7">{{column.processedCount}}</span>
          </div>
        </td>

        <!-- 面试中人数 -->
        <td class="ui-table_column_4">
          <div class="cell">
            <span style="color: #4c9de7">{{column.interviewCount}}</span>
          </div>
        </td>

        <!-- offer中人数 -->
        <td class="ui-table_column_5">
          <div class="cell">
            <span style="color: #4c9de7">{{column.offerCount}}</span>
          </div>
        </td>

        <!-- 入职/调动中人数 -->
        <td class="ui-table_column_6">
          <div class="cell">
            <span style="color: #4c9de7">{{column.entryCount}}</span>
          </div>
        </td>

        <!-- 岗位发布时间 -->
        <td class="ui-table_column_7">
          <div class="cell">
            <span style="color: #919191">{{column.releaseTime}}</span>
          </div>
        </td>

        <!-- 招聘经理 -->
        <td class="ui-table_column_8">
          <div class="cell">
            <span style="color: #4c9de7">{{column.manager}}</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
</template>

<script>
  import api from '@/api/api.js'
  import {Checkbox, Table, TableColumn, Row, Col, Dropdown, DropdownMenu, DropdownItem, Popover, Button} from 'element-ui'
  export default {
    components: {
      [Checkbox.name]: Checkbox,
      [Table.name]: Table,
      [TableColumn.name]: TableColumn,
      [Row.name]: Row,
      [Col.name]: Col,
      [Dropdown.name]: Dropdown,
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
      [Popover.name]: Popover,
      [Button.name]: Button
    },
    data () {
      return {
        loading: true,
        mailVisible: false, //邮件功能弹窗
        data: [], //表格数据内容
        currentPage: 1, //当前页数
        collaborationVisible: false, //项目协作弹窗
        form: {
          sort: '1',
          state: 0,
          type: 0,
        },
        mailVisible: false,
        phoneVisible: false,
        checkAll: false,
        isFixed: false
        
      }
    },
    created() {
      //获取表头配置数据
      this.loadData()
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/post2') == 0){
          this.initSticky()
        }
      })
    },
    mounted() {
      window.onresize = () => {
        this.initWidth()
      }
    },
    methods: {
      initSticky() {
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight + 
          document.getElementsByClassName('search-form')[0].clientHeight + 20
        if(_height >= topHeight * _zoom) {
          this.isFixed = true
          this.initWidth()
        } else {
          this.isFixed = false
          this.initWidth()
        }
      },
      initWidth() {
        for(let i=0; i<9; i++) {
          if(document.getElementsByClassName('ui-table_column_' + i)[1]) {
            const _w = document.getElementsByClassName('ui-table_column_' + i)[1].clientWidth || 0
            document.getElementsByClassName('ui-table_column_' + i)[0].style.width = _w + 'px'
          }
        }
        if(document.getElementsByClassName('ui-table')[1]){
          document.getElementsByClassName('ui-table')[0].style.width = document.getElementsByClassName('ui-table')[1].clientWidth + 'px'
        }
      },
      loadData() {
        // 获取表格数据
        this.loading = true;
        this.data= [
          {
            releaseCount: '6180',
            mediaCount: '',
            processedCount: '5614',
            interviewCount: '10624',
            offerCount: '10624',
            entryCount: '133',
            releaseTime: '',
            manager: ''
          },
          {
            releaseCount: 'CDG企业发展事业群     （509）',
            mediaCount: '32141',
            processedCount: '5614',
            interviewCount: '10624',
            offerCount: '10624',
            entryCount: '133',
            releaseTime: '',
            manager: '',
            isParent: true
          },
          {
            releaseCount: 'CDG行政中心    （2）',
            mediaCount: '1232',
            processedCount: '5614',
            interviewCount: '10624',
            offerCount: '10624',
            entryCount: '133',
            releaseTime: '',
            manager: '',
            isParent: true
          },
          {
            releaseCount: '9615-CDG部门秘书（深圳）',
            mediaCount: '2312',
            processedCount: '5614',
            interviewCount: '10624',
            offerCount: '10624',
            entryCount: '133',
            releaseTime: '2012-19-33',
            manager: 'lucaszhou(周挺)'
          },
          {
            releaseCount: '9615-CDG高级秘书（深圳）',
            mediaCount: '3213',
            processedCount: '5614',
            interviewCount: '10624',
            offerCount: '10624',
            entryCount: '133',
            releaseTime: '2012-19-33',
            manager: 'lucaszhou(周挺)'
          }
        ]
        this.loading = false;
        this.$nextTick(_ => {
          this.initWidth()
        })
      },
      changeCheckAll() {
        var flag = true;
        this.data.forEach(item => {
          if(!item.isChecked){
            flag = false
          }
        })
        this.data.forEach(item => {
          item.isChecked = !flag
        })
      },
      changeCheckItem() {
        var flag = false
        this.tableData.forEach(item => {
          if(item.isChecked){
            flag = true
          }
        })
      },
      //切换tab页面
      changeTabs(tab) {
        if(this.form.type !== tab){
          this.form.type = tab;
          this.loadData();
        }
      },
      // 表头筛选面试岗位
      handleInterviewPostCommand(command) {
        console.log(command)
      },
      
      // 表头筛选简历来源
      handleSourceCommand(command) {
        console.log(command)
      },
      takePhone(item) {
        item.phonePopupVisible = false
        this.phoneVisible = true;
      }
      
    }
  }
</script>

<style lang="scss">
  .phonePopupVisible:last-child{
    display: none!important;
  }
</style>
